import { without } from "lodash-es";
import { CommonComponentProps, CommonEditForm, PropToForm } from "./types";
import { defaultFontFamilyOptions, defualtFontStyleOptions, commonDefaultProps, commonDefaultEdit } from "./constants";

export interface ITextComponentProps extends CommonComponentProps {
    text: string;
    fontSize: string;
    fontFamily: string;
    fontStyle: string;
    fontWeight: string,
    textDecoration: string,
    lineHeight: string;
    textAlign: string;
    color: string;
    backgroundColor: string;
}

export interface ITextEditProps extends CommonEditForm {
    text: PropToForm;
    fontSize: PropToForm;
    fontFamily: PropToForm;
    fontStyle: PropToForm;
    lineHeight: PropToForm;
    textAlign: PropToForm;
    color: PropToForm;
    backgroundColor: PropToForm;
}

export const defaultTextComponentProps: ITextComponentProps = {
    text: "",
    fontSize: "16px",
    fontFamily: "",
    fontStyle: "",
    fontWeight: "normal",
    textDecoration: "none",
    lineHeight: "1",
    textAlign: "left",
    color: "#000",
    backgroundColor: "#FFF",
    ...commonDefaultProps
}

export const defaultTextEditProps: ITextEditProps = {
    text: {
        tag: "VTextarea",
        label: "文本",
        type: "basic",
        propType: "component",
        extraProps: {
            type: "textarea"
        },
        afterTransform: (e) => e?.target?.value,
    },
    fontSize: {
        tag: "InputNumber",
        label: "字号",
        type: "basic",
        propType: "style",
        initialTransform: (value: string) => parseInt(String(value).includes("px") ? value.slice(0, -2) : value),
        afterTransform: (value) => value ? `${value}px` : `${defaultTextComponentProps.fontSize}`
    },
    fontFamily: {
        tag: "VSelect",
        label: "字体",
        options: defaultFontFamilyOptions,
        subComponent: (option) => <span style={{fontFamily: option.value}}>{option.text}</span>,
        type: "basic",
        propType: "style",
    },
    fontStyle: {
        tag: "VFontStylePicker",
        label: "",
        options: defualtFontStyleOptions,
        propType: "style",
        type: "basic",
        propCombine: true
    },
    lineHeight: {
        tag: "Slider",
        label: "行高",
        type: "basic",
        propType: "style",
        extraProps: {
            min: 0,
            max: 3,
            step: 0.1
        }
    },
    textAlign: {
        tag: "VFontAlignPicker",
        label: "对齐",
        type: "basic",
        propType: "style",
    },
    color: {
        tag: "VColorPicker",
        label: "字体颜色",
        type: "basic",
        propType: "style",
    },
    backgroundColor: {
        tag: "VColorPicker",
        label: "背景颜色",
        type: "basic",
        propType: "style",
    },
    ...commonDefaultEdit
}

export const defaultTextTemplate = [
    {
        text: "大标题",
        fontSize: '30px',
        fontWeight: "bold",
        tag: 'h2'
    },
    {
        text: "正文内容",
        tag: "p"
    },
    {
        text: "链接内容",
        color: "#1890ff",
        textDecoration: "underline",
        tag: 'a'
    },
    {
        text: "按钮内容",
        color: "#FFF",
        backgroundColor: "#1890ff",
        borderWidth: '1px',
        borderColor: "#1890ff",
        borderStyle: "solid",
        borderRadius: "2px",
        paddingLeft: "10px",
        paddingRight: '10px',
        paddingTop: '5px',
        paddingBottom: '5px',
        width: '100px',
        height: "32px",
        textAlign: "center",
        tag: "button"
    }
]

export const textStylePropsNames = without(Object.keys(defaultTextComponentProps), 'actionType', 'url', 'text');